<template>
  <div>
    <!-- 模板里不需要写this，模板中可以获取到VC的所有属性 -->
    <h1>当前求和为: {{ sum }}</h1>
    <h3>当前求和放大十倍为: {{ BigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>
    <h3 style="color:red">Person组件的总人数是：{{ personList.length }}</h3>

    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>

    <!-- 2：Vue中方法如果不传参，默认是传递事件导致Vuex报错 -->
    <!-- 使用Vuex简写方法调用时，一定要传递指定参数过去 -->
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <button @click="jiaOdd(n)">总数为奇数时再加</button>
    <button @click="jiaWait(n)">延迟添加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    // 1：获取到state中的完整对象，页面通过对象.获取
    //...mapState(['countAbout', 'personAbout']),

    // 2：直接类似解构赋值，获取哪个对象下的state数据
    // 这种方式无法声明多个对象，并且必须添加  namespaced ！！！
    ...mapState('countAbout', ['sum', 'school', 'subject']),
    ...mapState('personAbout', ['personList']),


    // 4：getters这里是简写方式做了优化，自己写需要特殊格式
    ...mapGetters('countAbout', ['BigSum'])
  },
  methods: {
    // 3：同样指定使用的模块
    ...mapMutations('countAbout', ['JIA', 'JIAN']),
    ...mapActions('countAbout', ['jiaOdd', 'jiaWait'])
  },
  mounted() {
    // 分类后只能获取到state 中的 a和b
    console.log(this.$store.state)
  }
};
</script>

<style>
bottom {
  margin-left: 5px;
}
</style>
